<template>
  <div>
    <div style="font-size:16px;">成绩记录</div>
    <s-table
      ref="table"
      size="default"
      rowKey="key"
      :columns="columns"
      :data="loadData"
      class="user_management_table"
      :showPagination="false"
      style="margin-top:10px;"
    >
      <span slot="rank" slot-scope="text,record">
        <span v-for="(item,index) in record.score_arr" :key="index">
          <span v-if="item.student_id==Number(studentId)">{{item.rank}}</span>
        </span>
      </span>
      <span slot="score" slot-scope="text,record">
        <span v-for="(item,index) in record.score_arr" :key="index">
          <span v-if="Number($route.query.id)==Number(item.student_id)">{{item.score}}</span>
        </span>
      </span>
      <span slot="rank" slot-scope="text,record">
        <span v-for="(item,index) in record.score_arr" :key="index">
          <span v-if="Number($route.query.id)==Number(item.student_id)">{{item.rank}}</span>
        </span>
      </span>
    </s-table>
  </div>
</template>

<script>
import { getScoreList } from '@/api/student'
import { STable, Ellipsis } from '@/components'
export default {
  name: 'scoreTable',
  props: ['studentId'],
  components: { STable, Ellipsis },
  created() {},
  data() {
    return {
      columns: [
        {
          title: '考试名称',
          dataIndex: 'name',
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '考试时间',
          dataIndex: 'time',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '分数',
          dataIndex: 'score',
          ellipsis: true,
          align: 'center',
          scopedSlots: {
            customRender: 'score'
          }
        },
        {
          title: '排名',
          dataIndex: 'rank',
          ellipsis: true,
          align: 'center',
          scopedSlots: {
            customRender: 'rank'
          }
        }
      ],
      loadData: parameter => {
        return getScoreList(
          Object.assign(parameter, this.queryParam, {
            school_id: this.$store.state.user.school,
            student_id: Number(this.studentId),
            pageSize: 9999999
          })
        ).then(res => {
          return res
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
</style>